<!DOCTYPE html>
<html>
<head>
    <title>自习室预订系统管理 - 学生管理</title>
    <meta charset="UTF-8">
    <link href="../easyui/themes/bootstrap/easyui.css" rel="stylesheet" type="text/css">
    <link href="../easyui/themes/icon.css" rel="stylesheet" type="text/css">
    <link href="../easyui/themes/color.css" rel="stylesheet" type="text/css">
    <script src="../easyui/jquery.min.js" type="text/javascript"></script>
    <script src="../easyui/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="../easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
    <style type="text/css">
        body {
            font-family: microsoft yahei;
        }
    </style>
</head>
<body>
<div style="width:100%">
    <h2>学生管理</h2>

    <table class="easyui-datagrid" fitColumns="true" id="dg"
           pagination="true"
           rownumbers="true" singleSelect="true"
           title="学生信息" toolbar="#toolbar" method="get" url="/student">
        <thead>
        <tr>
            <th field="id" width="50">ID</th>
            <th field="stuNum" width="50">学号</th>
            <th field="name" width="50">姓名</th>
        </tr>
        </thead>
    </table>
    <div id="toolbar">
        <a class="easyui-linkbutton" href="javascript:void(0)" iconCls="icon-add" onclick="newStudent()"
           plain="true">添加</a>
        <a class="easyui-linkbutton" href="javascript:void(0)" iconCls="icon-edit" onclick="editStudent()"
           plain="true">修改</a>
        <a class="easyui-linkbutton" href="javascript:void(0)" iconCls="icon-remove"
           onclick="destroyStudent()"
           plain="true">删除</a>
    </div>

    <div class="easyui-dialog" data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'" id="dlg"
         style="width:400px">
        <form id="fm" method="POST" novalidate style="margin:0;padding:20px 50px">
            <h3>学生信息</h3>
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" label="学号:" prompt="请输入学号" name="stuNum" required="true"
                       data-options="multiline:false,validType:'length[8,16]'" id="stuNumInput"
                       style="width:100%">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-textbox" label="姓名:" prompt="请输入姓名" name="name" required="true"
                       data-options="multiline:false,validType:'length[6,16]'" id="nameInput"
                       style="width:100%">
            </div>
            <div style="margin-bottom:10px">
                <input class="easyui-passwordbox" label="密码:" prompt="请输入密码" name="password" required="true"
                       data-options="multiline:false,validType:'length[8,16]'"
                       style="width:100%">
            </div>
        </form>
    </div>

    <div id="dlg-buttons">
        <a id=savebtn href="#" class="easyui-linkbutton" iconCls="icon-ok" style="width:90px"
           onclick="saveStudent()">提交</a>
        <a id=closebtn href="#" class="easyui-linkbutton" iconCls="icon-cancel"
           onclick="javascript:$('#dlg').dialog('close')" style="width:90px">取消</a>
    </div>
</div>

<script type="text/javascript">
    var cmd;

    function newStudent() {
        $('#dlg').dialog('open').dialog('center').dialog('setTitle', '新增学生');
        $("#stuNumInput").textbox({readonly: false});
        $("#nameInput").textbox({readonly: false});
        $('#fm').form('clear');

        cmd = 'POST';
    }

    function editStudent() {
        var row = $('#dg').datagrid('getSelected');
        if (row) {
            $('#dlg').dialog('open').dialog('center').dialog('setTitle', '学生信息修改');
            $("#stuNumInput").textbox({readonly: true});
            $("#nameInput").textbox({readonly: true});
            $('#fm').form('load', row);

            cmd = 'PUT';
        }
    }

    function saveStudent() {
        $(function () {
            $('#savebtn').click(function () {
                var d = {};
                var t = $('#fm').serializeArray();
                $.each(t, function () {
                    d[this.name] = this.value;
                });

                $.ajax({
                    url: "/student",
                    type: cmd,
                    contentType: "application/json",
                    dataType: "json",
                    data: JSON.stringify(d),
                    statusCode: {
                        200: function () {
                            $('#dlg').dialog('close');
                            $('#dg').datagrid('reload');
                        },
                        400: function () {
                            $.messager.alert('提示', '操作失败!');
                        }
                    }
                });
            });
        });
    }

    function destroyStudent() {
        var selectStu = $('#dg').datagrid('getSelected');
        if (selectStu) {
            $.messager.confirm('提交', '确定删除此学生?', function (committed) {
                if (committed) {
                    $.ajax({
                        url: "/student/" + selectStu.stuNum,
                        method: "DELETE",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        statusCode: {
                            200: function () {
                                $('#dlg').dialog('close');
                                $('#dg').datagrid('reload');
                            },
                            400: function () {
                                $.messager.alert('提示', '删除失败!');
                            }
                        }
                    })
                }
            })
        }
    }
</script>
</body>
</html>
